<script lang="ts">
  import { onMount } from 'svelte';
  import { addToast } from '../../stores/toastStore';
  import { userStore } from '../../stores/userStore';

  const apiUrl = import.meta.env.VITE_API_URL || '';

  let type = 13; // 登录方式
  let phone = '17371086562'; // 电话
  let verification_code = '1234'; // 验证码
  let token = 'token'; // 令牌

  const handleLogin = async () => {
    const response = await fetch(`${apiUrl}/auth/login`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ type, phone, verification_code })
    });

    const data = await response.json();
    if (data.data.state) {
      userStore.update(store => {
        return {
          ...store,
          isLoggedIn: true,
          id: data.data.user_id,
          token: data.data.token
        };
      });

      addToast('登录成功', 'info', 3000);
    } else {
      addToast('登录失败', 'error', 3000);
    }
  };
  const handleSendVerificationCode = async () => {
    const response = await fetch(`${apiUrl}/auth/send-verification-code`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ phone, token })
    });

    const data = await response.json();
    if (data.data.state) {
      addToast('发送验证码成功', 'info', 3000);
    } else {
      addToast('发送验证码失败', 'error', 3000);
    }
  };
</script>

<main class="flex justify-center items-center h-screen">
  <div class="bg-white p-6 rounded-lg shadow-lg max-w-md w-full ml-2 mr-2">
    <h1 class="text-2xl font-bold mb-6">欢迎回来！</h1>
    <form on:submit|preventDefault={handleLogin}>
      <div class="mb-4">
        <label class="flex items-center border rounded-lg px-3 py-2 bg-gray-100">
          <svg class="w-6 h-6 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8m0 0 18 0m0 0 0-2a4 4 0 0 0-8 0v2m0 0 6 0m0 0v10a4 4 0 0 1-8 0V8m0 0 6 0"></path></svg>
          <input type="text" class="flex-1 bg-transparent outline-none" placeholder="请输入手机号" bind:value={phone} >
        </label>
      </div>
      <div class="mb-4 flex items-center">
        <label class="flex-1 flex items-center border rounded-lg px-3 py-2 bg-gray-100">
          <svg class="w-6 h-6 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 11V7a4 4 0 1 1 8 0v4m-1 11H6a4 4 0 0 1-4-4v-5a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v5a4 4 0 0 1-4 4z"></path></svg>
          <input class="flex-1 bg-transparent outline-none" type="text" placeholder="请输入验证码" bind:value={verification_code} >
        </label>
        <button type="button" class="ml-4 bg-blue-500 text-white px-3 py-2 rounded-lg" on:click={handleSendVerificationCode}>发送验证码</button>
      </div>
      <button type="button" class="w-full bg-blue-500 text-white text-lg py-3 rounded-lg" on:click={handleLogin}>登录</button>
    </form>
  </div>
</main>

<style lang="scss">
</style>
